<template>
  <div class="loginbg">
    <div class="box" @submit.prevent="submit">
      <div class="tab">
        <a :class="{ active: type == 'login' }" @click="changeType('login')"
          >登录</a
        >
        <a
          :class="{ active: type == 'register' }"
          @click="changeType('register')"
          >注册</a
        >
      </div>
      <div>
        <input type="text" v-model="user.username" placeholder="输入用户名" />
      </div>
      <div>
        <input type="password" v-model="user.password" placeholder="输入密码" />
      </div>
      <div class="vcodebox">
        <input
          class="code"
          type="vcode"
          v-model="user.code"
          placeholder="请输入验证码"
        />
        <button class="codeBtn" @click="getCode">获取验证码</button>
      </div>
      <div>
        <input
          @click="loginAction"
          v-show="type == 'login'"
          type="submit"
          value="登录"
        />
        <input
          @click="regAction"
          v-show="type == 'register'"
          type="submit"
          value="注册"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getSms, login } from "@/api";
export default {
  name: "Login",
  created() {
    console.log(this.$store.state.token);
  },
  data() {
    return {
      type: "login",
      user: {
        username: "15934827717",
        password: "123456",
        module: "login",
        code: "",
      },
    };
  },
  methods: {
    regAction() {
      this.axios
        .post("http://47.75.46.246:9999/register", this.user)
        .then((res) => {
          alert("注册成功");
          this.type = "login";
          this.user.module = "login";
        });
    },
    getCode() {
      console.log("获取验证码");
      console.log(this.user);

      // this.axios
      //   .post("/api/getsms", this.user)

      getSms(this.user).then((res) => {
        console.log(res);
        this.user.code = res.data.code;
      });
    },
    changeType(type) {
      this.type = type;
      this.user.module = type;
    },
    loginAction(e) {
      console.log("准备登录");
      // this.axios.post("http://47.75.46.246:9999/login", this.user);

      login(this.user).then((res) => {
        if (res.status === 1000) {
          // 如果登录成功 后台会给你返回一个 token  把token存到本地
          alert("登录成功");
          const token = res.data.token;
          localStorage.setItem("token", token);
          //   this.$store.state.token = '9527'; // 错误的示例
          this.$store.commit("setToken", token); // 修改state的值 通过commit 提交我们的mutation
          this.$store.dispatch("getUserInfo");

          // 跳转到首页
          this.$router.push({
            name: "Home",
          });
        } else {
          alert(res.data.msg);
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.loginbg {
  width: 100%;
  height: 100vh;
  background: url("../assets/loginbg.jpg") no-repeat;
  background-size: cover;
  background-position: center center;
  .box {
    width: 300px;
    background: rgba(255, 255, 255, 0.4);
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    .tab {
      display: flex;
      .active {
        color: red;
        font-weight: bold;
      }
      & > a {
        width: 50%;
        height: 35px;
        text-align: center;
        cursor: pointer;
      }
    }
    .vcodebox {
      display: flex;
      .codeBtn {
        width: 10em;
      }
    }
    & > div {
      padding: 10px 0;
    }
    input {
      padding: 0 10px;
      width: 100%;
      height: 35px;
      box-sizing: border-box;
    }
  }
}
</style>